<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
    <meta name="format-detection" content="telephone=no">

    <!-- 格式识别 -->
    <title>Reader</title>

    ##head##
</head>

<style>
    body{margin: 0;padding: 0;font: 'Microsoft YaHei",Arial,sans-serif';
    font-size: 16px;line-height: 1.5;color: #353536;}

    main{ padding:10px;margin-top: 10px;margin-bottom:30px;padding-left:10px;padding-right:10px;}

    #content{text-align: left;padding-bottom: 50px;margin-bottom: 20px;}

/* color: #111; */
    h1{text-align: left;font-size: 19px;margin:8px;padding-bottom:20px;}

/* color: #232323; */
    h3{text-align: left;font-size: 18px;margin:8px;padding-bottom:10px;padding-top:15px;}

/* color: #353536; */
    p{text-align: left;margin:8px;padding-bottom:5px;}

    img{max-width: 98%;height: auto;margin-bottom:10px;}
    /* 加载完毕 */
    #state{width: 100%;text-align: center;align-content: center;color: #CCCCCC; }

    .head{border-bottom: 1px solid #f1f1f1;padding-bottom: 20px;margin-bottom: 30px;  }
		.container {
			padding: 8px;
            height: auto;
            min-height: 1000px;
		}
		.button-container {position: fixed;bottom: 0;left: 0;right: 0;
			display: flex;justify-content: space-around;align-items: center;background-color: #fff;
			box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease-in-out;transform: translateY(100%);}
		.button-container.show {transform: translateY(0);}
		button {font-size: 16px;padding: 8px;border: none;background-color: transparent;cursor: pointer;transition: background-color 0.3s ease-in-out;}
		button:hover {background-color: #f5f5f5;}
    
    /* 顶部导航栏样式 */
    .top-bar-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
        transform: translateY(-100%);
        padding: 10px;
        height: 50px;
        z-index: 1000;
    }
    
    .top-bar-container.show {
        transform: translateY(0);
    }
    
    .title-container {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 18px;
        font-weight: bold;
        padding-left: 10px;
    }
    
    .source-button {
        padding: 8px 12px;
        background-color: #f0f0f0;
        border-radius: 4px;
        font-size: 14px;
        margin-right: 10px;
    }
    
    /* 调整内容区域，避免被顶部栏遮挡 */
    main {
        padding-top: 60px;
    }

</style>
<body>
<!-- 添加顶部导航栏 -->
<div class="top-bar-container show" id="top-bar-container">
    <div class="title-container" id="article-title">标题加载中...</div>
    <button class="source-button" id="source-button">完整访问</button>
</div>

<main>
    <div class="container">
        <div id="content">
        </div>
        <div id="btndiv">
            <button id="btnPrev">上一页</button>
            <button id="btnNext">下一页</button>
        </div>
    </div>
    <div class="button-container show" id="button-container">
        <button id="font-size-decrease">A-</button>
        <button id="font-size-increase">A+</button>
        <button id="background-color-white">白色</button>
        <button id="background-color-lightgray">浅灰</button>
        <button id="background-color-darkgray">深灰</button>
    </div>
</main>
##body##
<script type="text/javascript">
    document.getElementById("btnPrev").onclick = function goPrev(){
       window.reader.goPrev();
    }

    document.getElementById("btnNext").onclick = function goNext(){
        window.reader.goNext();
    }

	function upContent(){
        try {
            // 检查reader接口是否可用
            if (window.reader) {
                var content = window.reader.getContent();
                document.getElementById("content").innerHTML = content || "内容加载中...";
                
                var title = window.reader.getTitle();
                updateTitle(title);
                
                // 确保显示顶部栏和底部栏
                document.getElementById("top-bar-container").classList.add("show");
                document.getElementById("button-container").classList.add("show");
            } else {
                console.error("reader接口不可用");
            }
        } catch (e) {
            console.error("upContent错误:", e);
        }
        
		document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
	}
    
    // 更新标题函数
    function updateTitle(title) {
        document.getElementById("article-title").innerText = title || "无标题";
    }

	/* 0 false，1 true */
	function hideNext($v){
        var view = document.getElementById("btnNext");
        if($v == 1){
            view.style.visibility = 'hidden'
        }else{
            view.style.visibility = 'visible'
        }
	}

	function hidePrev($v){
        var view = document.getElementById("btnPrev");
        if($v == 1){
            view.style.visibility = 'hidden'
        }else{
            view.style.visibility = 'visible'
        }
	}

    hidePrev(1);
    hideNext(1);

    // 设置全局错误处理器以捕获任何JavaScript错误
    window.onerror = function(message, source, lineno, colno, error) {
        console.error("JavaScript错误:", message, "在", source, "行:", lineno);
        return true;
    };

    // 初始化函数
    function initialize() {
        // 工具栏
        var buttonContainer = document.getElementById("button-container");
        var topBarContainer = document.getElementById("top-bar-container");
        var sourceButton = document.getElementById("source-button");
		var fontSizeDecrease = document.getElementById("font-size-decrease");
		var fontSizeIncrease = document.getElementById("font-size-increase");
		var backgroundColorWhite = document.getElementById("background-color-white");
		var backgroundColorLightgray = document.getElementById("background-color-lightgray");
		var backgroundColorDarkgray = document.getElementById("background-color-darkgray");
		var body = document.body;

		// 字体大小 尝试读取配置项中的fontsize
        var fontSize = 16; // 默认值
        try {
            if (window.reader) {
                fontSize = window.reader.getFontSize() || 16;
            }
        } catch (e) {
            console.error("获取字体大小错误:", e);
        }
        
        if(fontSize == 0) fontSize = parseInt(window.getComputedStyle(body).getPropertyValue("font-size"));
        body.style.fontSize = fontSize + "px";

        // 背景颜色
		var backgroundColor = window.getComputedStyle(body).getPropertyValue("background-color");

		// 显示/隐藏按钮
		var lastScrollPosition = 0;
		window.addEventListener("scroll", function() {
			var currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
			if (currentScrollPosition > lastScrollPosition) {
				buttonContainer.classList.remove("show");
                topBarContainer.classList.remove("show");
			} else {
				buttonContainer.classList.add("show");
                topBarContainer.classList.add("show");
			}
			lastScrollPosition = currentScrollPosition;
		});

		// 调整字体大小
		fontSizeDecrease.addEventListener("click", function() {
			fontSize--;
			body.style.fontSize = fontSize + "px";
            if (window.reader) {
			    window.reader.upFontSize(fontSize);
            }
		});
		fontSizeIncrease.addEventListener("click", function() {
			fontSize++;
			body.style.fontSize = fontSize + "px";
            if (window.reader) {
			    window.reader.upFontSize(fontSize);
            }
		});

		// 调整背景颜色
		backgroundColorWhite.addEventListener("click", function() {
			body.style.backgroundColor = "#fff";
			body.style.color = "#333";
            if (window.reader) {
			    window.reader.upHeadColor("#ffffff");
            }
		});
		backgroundColorLightgray.addEventListener("click", function() {
			body.style.backgroundColor = "#f5f5f5";
			body.style.color = "#333";
            if (window.reader) {
			    window.reader.upHeadColor("#f5f5f5");
            }
		});
		backgroundColorDarkgray.addEventListener("click", function() {
			body.style.backgroundColor = "#333";
			body.style.color = "#fff";
            if (window.reader) {
			    window.reader.upHeadColor("#333333");
            }
		});
        
        // 完整访问按钮点击事件
        sourceButton.addEventListener("click", function() {
            if (window.reader) {
                window.reader.loadSourceUrl();
            }
        });

        // 更新背景颜色
        if (window.reader) {
            window.reader.upHeadColor(body.style.color || "#333333");
        }

        // 尝试多次加载内容，确保能够成功
        upContent();
        
        // 延迟200ms后再次尝试加载
        setTimeout(upContent, 200);
        
        // 延迟1000ms后再次尝试加载
        setTimeout(upContent, 1000);
    }

    // 多种方式确保初始化执行
    // 1. DOMContentLoaded事件
    document.addEventListener("DOMContentLoaded", initialize);
    
    // 2. 如果文档已经加载完成，直接执行
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(initialize, 1);
    }
    
    // 3. 窗口加载完成事件
    window.addEventListener("load", upContent);
</script>

</body>
</html>